---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

const posts = (await getCollection('blog')).sort(
	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---

<BaseLayout title="Blog - Epicenter">
	<main class="min-h-screen bg-white">
		<div class="max-w-2xl mx-auto px-6 py-24">
			<header class="mb-16">
				<div class="mb-8">
					<a
						href="/"
						class="text-gray-600 hover:text-gray-900 transition-colors"
						>← Back to home</a
					>
				</div>
				<h1 class="text-4xl font-semibold text-gray-900 mb-4">Blog</h1>
				<p class="text-xl text-gray-600">
					Thoughts on building tools that matter.
				</p>
			</header>

			<section>
				<ul class="space-y-12">
					{
						posts.map((post) => (
							<li>
								<article>
									<time class="text-sm text-gray-500">
										{post.data.pubDate.toLocaleDateString('en-US', {
											year: 'numeric',
											month: 'long',
											day: 'numeric',
										})}
									</time>
									<h2 class="text-2xl font-semibold text-gray-900 mt-2 mb-3">
										<a
											href={`/blog/${post.slug}/`}
											class="hover:text-gray-600 transition-colors"
										>
											{post.data.title}
										</a>
									</h2>
									<p class="text-gray-600">{post.data.description}</p>
								</article>
							</li>
						))
					}
				</ul>
			</section>
		</div>
	</main>
</BaseLayout>
